<template>
    <canvas ref="canvas"></canvas>
</template>


<script setup>
import { ref, onMounted, onUnmounted } from "vue"

const canvas = ref(null);
let ctx;
let hearts = [];

const initializeCanvas = () => {
    ctx = canvas.value.getContext('2d');
    requestAnimationFrame(animate);
};

const animate = () => {
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
    updateHearts();
    drawHearts();
    requestAnimationFrame(animate);
};

const updateHearts = () => {
    for (let i = 0; i < hearts.length; i++) {
        hearts[i].y += hearts[i].speed;
        if (hearts[i].y > canvas.value.height) {
            hearts[i].y = -hearts[i].size;
            hearts[i].x = Math.random() * canvas.value.width;
        }
    }
};

const drawHearts = () => {
    for (let i = 0; i < hearts.length; i++) {
        let heart = hearts[i];
        ctx.beginPath();
        ctx.fillStyle = heart.color;
        ctx.moveTo(heart.x, heart.y + heart.size / 2);
        ctx.bezierCurveTo(
            heart.x,
            heart.y,
            heart.x - heart.size / 2,
            heart.y,
            heart.x - heart.size / 2,
            heart.y + heart.size / 2
        );
        ctx.bezierCurveTo(
            heart.x - heart.size / 2,
            heart.y + heart.size * 0.8,
            heart.x,
            heart.y + heart.size * 0.8,
            heart.x,
            heart.y + heart.size * 1.5
        );
        ctx.bezierCurveTo(
            heart.x,
            heart.y + heart.size * 0.8,
            heart.x + heart.size / 2,
            heart.y + heart.size * 0.8,
            heart.x + heart.size / 2,
            heart.y + heart.size / 2
        );
        ctx.bezierCurveTo(
            heart.x + heart.size / 2,
            heart.y,
            heart.x,
            heart.y,
            heart.x,
            heart.y + heart.size / 2
        );
        ctx.closePath();
        ctx.fill();
    }
};

const generateRandomHeart = () => {
    return {
        x: Math.random() * canvas.value.width,
        y: Math.random() * canvas.value.height,
        size: Math.random() * 20 + 10, // Random size between 10 and 30
        speed: Math.random() * 2 + 1, // Random speed between 1 and 3
        color: getRandomColor()
    };
};

const getRandomColor = () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
};

onMounted(() => {
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
    for (let i = 0; i < 50; i++) {
        hearts.push(generateRandomHeart());
    }
    initializeCanvas();
});

onUnmounted(() => {
    hearts = [];
});
</script>

<style lang="scss" scoped>
canvas {
    display: block;
}
</style>